<template>
    <nav-bar>
        <div slot="left" @click="backClick">
            <img src="~assets/img/common/back.svg" class="img-detail" />
        </div>
        <div slot="center" class="detail">
            <div v-for="(item, index) in list" :key="index" class="detail-nav" :class="{'active': index === currentIndex}" @click="itemClick(index)">
                {{item}}
            </div>
        </div>
    </nav-bar>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
export default {
    name: 'DetailNavBar',
    components: {
        NavBar
    },
    data() {
        return {
            list: ['商品', '参数', '评论', '推荐'],
            currentIndex: 0
        }
    },
    methods: {
        itemClick(index) {
            this.currentIndex = index
        },
        backClick() {
            this.$router.back()
        }
    }
}
</script>
<style scoped>
    .detail {
        display: flex;
    }
    .detail-nav {
        flex: 1;
    }
    .active {
        color: var(--color-high-text);
    }
    .img-detail {
        margin-top: 10px;
    }
</style>